<template>
  <view>
    <view v-if="!userId">
      <inner-login />
    </view>
    <view v-else>
      <view class="price-content">
        <view class="btn-scroll flex_p_lr">
          <view class="btn-box rflex flex_y_center flex_p_lr">
            <view class="btn-item rflex flex_y_center flex_x_center" :class="btn_item_active === item.id ? 'active' : ''"
                  @click="btn_choose(item)"
                  v-for="item in btn_item_list" :key="item.id">{{item.txt}}</view>
          </view>
        </view>
        <view class="list-box flex_p">
          <view class="list_item_view" v-for="item in list" :key="item.id">
            <view class="list_item flex_p_lr flex_y_center" @click="toDetail(item.id)">
              <view class="line_co rflex flex_y_center">
                <image class="image" src="https://public-yz.oss-cn-nanjing.aliyuncs.com/2025/07/15/540827228f614df794797fc52046cdb9.png" />
                <view class="flex_w_8"></view>
                <view class="co_name">{{item?.part?.partName}}</view>
                <!--<view class="flex_w_5"></view>
                <view class="threeMini">未确定</view>
                <view class="rflex flex_y_center" v-if="item.product">
                  <view class="threeMini bg_yellow" v-if="item.product?.productImgUrl?.split(',')[0]">图片</view>
                  <view class="threeMini bg_blue" v-if="item.product?.productFilesUrl?.split(',')[0]">文件</view>
                </view>-->
              </view>
              <view class="status_box rflex flex_y_center">
                <image src="https://public-yz.oss-cn-nanjing.aliyuncs.com/12f901defda0a4f5c683b44e753f1bbc6feb57ad2ad9edf4a4314140d856b84a.png" v-if="item?.status < 1" mode="heightFix" />
                <image src="https://public-yz.oss-cn-nanjing.aliyuncs.com/f4a4f1788a07b56d6c134f70f2105709a1f62f5085979881e0207d35b408dde0.png" v-else mode="heightFix"  />
              </view>
              <view class="flex_h_5"></view>
              <view style="color: grey">询价编号：{{item?.orderXjNo}}</view>
              <view class="flex_h_5"></view>
              <view class="flex_h_15 rflex flex_y_center">
                <view class="heng_box"></view>
              </view>
              <div class="flex_h_5"></div>
              <view class="main-content rflex">
                <view class="flex_2">
                  <view class="product_introduction flex_p_lr flex_no_pl">
                    <uv-parse :content="item?.orderXjRemark || '暂无询价说明'"></uv-parse>
                  </view>
                </view>
                <view class="flex_1 rflex flex_x_center flex_y_center">
                  <image :src="item.part?.partImage.split(',')[0]" mode="aspectFit" style="width: 90%;height: 80px" v-if="item.part" />
                </view>
              </view>
            </view>
            <view class="flex_h_10"></view>
          </view>
        </view>
        <!-- 加载更多 -->
        <uv-load-more :status="status" line lineColor="#1B76FF" color="#1B76FF"  />
        <view class="flex_h_20"></view>
      </view>
    </view>
  </view>
</template>

<script>
import PriceApi from "@/api/price/price";
import {getUserInfoId} from "@/utils/auth";
import InnerLogin from "@/components/innerLogin.vue";

export default {
  components: {
    InnerLogin,
  },
  data(){
    return {
      userId: null,
      status: 'nomore',
      btn_item_list: [{id: 0, txt: '待报价'}, {id: 1, txt: '已报价'}, {id: 2, txt: '已完成'},  {id: 3, txt: '已过期'}],
      btn_item_active: 0,
      list: [],
      queryParams:{
        pageSize: 10,
        pageNum: 1,
        status: 0,
      }
    };
  },
  onShow() {
    this.userId = getUserInfoId();
    if (this.userId) {
      this.restQueryArr();
      this.getList();
    }
  },
  onReachBottom() {
    if (this.status === 'loadmore') {
      this.queryParams.pageNum += 1
      this.getList();
    }
  },
  onPullDownRefresh() {
    this.list = []
    this.queryParams.pageNum = 1
    this.getList()
  },
  methods: {
    async getList() {
      this.status = 'loading'
      const data = await PriceApi.getSupplierPriceList(this.queryParams)
      this.list = this.list.concat(data?.rows);
      this.status = data?.rows.length < this.queryParams.pageSize ? 'nomore' : 'loadmore';
      uni.stopPullDownRefresh();
    },
    btn_choose(item) {
      this.btn_item_active = item['id'];
      this.queryParams.status = item['id'];
      this.restQueryArr();
      this.getList();
    },
    toDetail(id) {
      uni.navigateTo({
        url: '/page_price/detail?id=' + id
      })
    },


    //  重置查询参数
    restQueryArr() {
      this.queryParams.pageNum = 1;
      this.list  = [];
    },
  },
}
</script>


<style scoped lang="scss">
.price-content{
  .btn-scroll{
    width: 100vw;
    background-image: linear-gradient(#2D4C98,#F5F5F5);
    .btn-box{
      height: 70px;
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      .btn-item{
        min-width: 100px;
        height: 36px;
        margin-right: 20rpx;
        border-radius: 13px;
        border: 1px solid #2D4C98;
        background: #E3EBFF;
        color: #2D4C98;
        &.active{
          background: #2D4C98;
          color: #fff;
        }
      }
    }
  }
  .list-box{
    padding-bottom: 25px;
    .list_item_view{
      .list_item{
        border-radius: 12px;
        background-image: linear-gradient(#2D4C9829,#415B9A00);
        .line_co{
          height: 45px;
          image{
            width: 25px;
            height: 23px;
          }
          .threeMini {
            padding: 1px 3px;
            margin-right: 5px;
            background: #FF000029;
            border: 1px solid #FF0000;
            color: #FF0000;
            font-size: 20rpx;

            &.bg_blue {
              background: #1B76FF29;
              border: 1px solid #1B76FF;
              color: #1B76FF;
            }

            &.bg_yellow {
              background: #FFAA5C29;
              border: 1px solid #FFAA5C;
              color: #FFAA5C;
            }
          }
          .co_name{
            font-size: 30rpx;
            font-weight: bolder;
          }
        }
        .status_box{
          height: 30px;
          image{
            height: 20px;
          }
        }
        .heng_box{
          width: 40px;
          height: 2px;
          background: #D4D4D4;
        }
        .main-content{
          min-height: 100px;
          .product_name{
            font-weight: bold;
            font-size: 28rpx;
          }
          .product_introduction{
            font-size: 24rpx;
            color: #868686;
            display: -webkit-box;
            -webkit-line-clamp: 4; /* 限制文本显示为3行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
